<template>
  <div class="login"> 
    <div class="login-logo">
      <img src="http://114.67.117.88:8089/seeyon/fileUpload.do?method=showRTE&type=image&fileId=-5403112029741757823" alt="">
    </div>
    <div class="login-wrap">
      <div class="login-bg"></div>
      <div class="login-box">
        <!-- <div class="menu-title">
          <div class="title-text">仓储管理系统</div>
        </div> -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="loginForm" size="medium" class="login-form">
          
          <el-form-item prop="username" class="item-from">
            <i class="iconfont icon-shoujihao"></i>
            <el-input id="username" type="text" placeholder="请输入用户名" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item prop="password" class="item-from">
            <i class="iconfont icon-mima"></i>
            <el-input id="password" placeholder="请输入密码" @keyup.native.enter="submitForm('loginForm')" type="password" maxlength="20" minlength="6" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>

          <!-- <el-form-item prop="passwords" class="item-from" v-if="model === 'register'">
            <label for="passwords">重复密码</label>
            <el-input id="passwords" type="password" maxlength="20" minlength="6" v-model="ruleForm.passwords" autocomplete="off"></el-input>
          </el-form-item> -->

          <!-- <el-form-item prop="code" class="item-from">
            <label for="">验证码</label>
            <el-row :gutter="10">
              <el-col :span="15">
                <el-input v-model="ruleForm.code"></el-input>
              </el-col>
              <el-col :span="9">
                <el-button type="success" class="block" :disabled="codeButtonStatus" @click="getSms()">{{ codeButtonText }}</el-button>
              </el-col>
            </el-row>
            
          </el-form-item> -->

          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" 
            class="login-btn block">{{ model === 'login' ? '登录' : '注册' }}</el-button>
          </el-form-item>

        </el-form>
      </div>
      
    </div>
  </div>
</template>

<script>
import sha1 from 'js-sha1';
import { Login } from '@/api/login';
import { stripscript, validateEmail, validatePass, validataVCode } from '@/utils/validate.js';
export default {
  name: 'login',
  data() {
    var validateUsername = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    var validatePassword = (rule, value, callback) => {
      
      // console.log(stripscript(value));
      this.ruleForm.password = stripscript(value);
      value = this.ruleForm.password;

      if (value === '') {
        callback(new Error('请输入密码'));
      } 
      // else if (!validatePass(value)) {
      //   callback(new Error('密码为6至20位的数字+字母'));
      // } 
      else {
        callback();
      }
    };

    
    return {
      menuTab: [
        { txt: '登录', current: true, type: 'login' },
        { txt: '注册', current: false, type: 'register' },
      ],
      model: 'login',
      codeButtonStatus: false,
      codeButtonText: '获取验证码',
      timer: null,
      ruleForm: {
        username: '',
        password: '',
        code: '',
        passwords: ''
      },
      rules: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
      }
    }
  },
  created() {

  },
  mounted() {
    
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let reqData = {
              username: this.ruleForm.username,
              password: this.ruleForm.password
            }
            this.$store.dispatch('app/login',reqData)
            .then(response => {
              if(+response.data.status === 200){
                // 跳转到首页
                this.$router.push({path: '/console'})
              } else {
                this.$message({
                  message: response.data.msg,
                  type: 'success'
                })
              }
            }).catch( error => {

            })
    
          }else {
              console.log('error submit!!');
              return false;
          }          
        });   
    },
  }
}
</script>

<style lang="scss" scoped>
  .login {
    background: url('../../assets/img/login-bg.png');
    // background-color: #344a5f;
    background-size: cover;
    height: 100vh;
  }
  .login-logo {
    position: fixed;
    top: 9%;
    left: 5%;
    z-index:9;
  }
  .login-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 240px;
    // margin: auto;
    background-color: transparent;
  }
  .login-bg {
    position: absolute;
    top: 0;
    left:0;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    opacity: 0.1;
    z-index: 1
  }
  .login-box {
    position: absolute;
    left: 50%;
    margin-left: -465px;
    top: 50%;
    margin-top: -80px;
    z-index: 2;
    width: 930px;
  }
  .menu-title {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-top: 30px;
    color: #fff
  }
  .menu-tab {
    text-align: center;
    li {
      display: inline-block;
      width: 88px;
      line-height: 36px;
      font-size: 14px;
      color: #fff;
      border-radius: 2px;
      cursor: pointer;
    }
    .current {
      background-color: rgba(0,0,0,0.1)
    }
  }
  .login-form {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .item-from {
      width: 33%;
      // flex: 1;
      // justify-content: space-between;
      border: 1px solid rgb(231, 231, 231);
      background-color: #fff;
      margin-bottom: 30px;
      height: 40px;
       border-radius: 20px;
      i {
        margin-left: 20px;
        line-height: 40px;
        color: #409EFF;
        font-size: 20px;
      }
      .el-input {
        width: 80%;
        height: 40px;
        line-height: 40px;
        margin-left: 10px;
        color: #333;
      }
      .login-code {
        display: inline-block;
        margin-left: 10px;
        width: 30%;
        vertical-align: middle;
        .code {
          width: 70%;
        }
      }
    }
    .block {
      width: 220px;
      border-radius: 20px;
      height: 40px;
      // padding-top: -20px;
      line-height: 20px;
      display: block;
      background-color: rgb(56, 198, 78);
    }
    .login-btn {
      font-size: 24px;
      span {
        font-size: 24px !important;
      }
    }
    button {
      span {
        font-size: 24px !important;
      }
    }
  }
</style>